const { defineConfig } = require('@vue/cli-service')
const path = require('path')
const { VantResolver } = require('unplugin-vue-components/resolvers')
const ComponentsPlugin = require('unplugin-vue-components/webpack')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      // 实现项目中使用的UI组件为自动按需导入
      ComponentsPlugin({
        resolvers: [VantResolver()]
      })
    ]
  },
  pluginOptions: {
    // less自动注入
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.join(__dirname, './src/styles/variables.less')]
    }
  },
  chainWebpack(config) {
    // 配置svg的loader
    config.module.rules.delete('svg') //重点:删除默认配置中处理svg
    config.module
      .rule('svg')
      .exclude.add(path.join(__dirname, './src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(path.join(__dirname, './src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]' // 设置引用svg图标的类名
      })
      .end()
  }
})
